<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<title>上传视频表单提交页面</title>
</head>
<body>
<!-- 通过表单方式将数据提交到UpLoadservlet，再提交之前要把videotable属性全部得到并set,这样跳转后才能拿到值
传者即用户,等视频转码后set,VideoBean得到我们需要传到SQL表单的属性在调用添加方法上传，完成同步-->
<!-- 视频上传区域form表 ,通过id调用el方法实现视频上传-->
<form class="layui-form layui-form-pane" action=""  style="margin-left: 50px;margin-top: 50px">
<button type="button" class="layui-btn" id="videoUpload" style="margin-bottom: 20px"><i class="layui-icon"></i>上传路径</button>

<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%" style="margin-bottom: 50px;"></div>
</div>
</form>

<!-- form表 ,里面的获取的方式有区别,分析分别用了上面方式来获取属性值的-->
<form class="layui-form layui-form-pane" action="VideoServlet" method="post"  style="margin-left: 50px;margin-top: 10px" >
	<input type="hidden"  name="method"  value="add">
<!-- 标题通过设置name跳转得到 -->	
  <div class="layui-form-item" style="margin-top: 50px;">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-inline">
      <input type="text" name="pageName" lay-verify="required" placeholder="请输入"  value="默认视频名称" autocomplete="off" class="layui-input">
    </div>
  </div>
<!-- 类型通过设置name跳转得到 -->
   <div class="layui-form-item">
    <label class="layui-form-label">类型</label>
    <div class="layui-input-inline">
      <select name="videoType">
<!-- 这里将之前调用方法得到的专业通过for循环便利出来 -->
        <option value="">请选择</option>     
      	<c:forEach var="m"  items="${majorInfo }">
	        <option value="${m.majorId }" >${m.majorName }</option>
      	</c:forEach>
      </select>
    </div>
  </div>
 <!-- 封面缩略图路径通过id调用el方法获得 -->
  <div class="layui-form-item">
   <label class="layui-form-label">视频封面</label>
   <div class="layui-input-inline">
  		<button type="button"  class="layui-btn" id="imgUpload"  placeholder="">选择视频的封面</button>
	</div>
</div> 
 <!-- 简介通过name跳转得到 -->
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">视频简介</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" name="videoMsg" class="layui-textarea"></textarea>
    </div>
  </div>
  <!-- 通过form和submit表单提交跳转 -->
  <div class="layui-form-item">
    <input class="layui-btn" lay-submit="" type="submit"  value="上传" />
  </div>
</form>
<script src="layui/layui.all.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','upload'], function(){
  //说的是固定格式
  var element = layui.element;
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //上传视频进度条实现
  upload.render({
	    elem: '#videoUpload'  //绑定元素，即上面对应的id
	    ,url: 'UploadServlet' //方法执行的路径
	    ,accept: 'video' //视频
	    ,done: function(res){ // 上传文件后得到的 服务器响应状态  回掉

	    }
  		,before: function(obj){
  		  var n=0, timer=setInterval(function(){
  			 //setInterval(）方法：即每隔0.5秒调用（function(){}方法一次，作用是刷新进度条
  			 //这里上传的是两个参数分别是（function(){}，500）
 		     $.ajax({
 	  			   type: "POST",
 	  			   url: "AjaxSizeServlet",
 	  			   success: function(msg){
 	  				   n=msg;
 	  				if(n>=100){
 	  		          	n=100;
 	  		         	element.progress('demo',n+"%");
 	  					clearInterval(timer);
 	  		        }
 	  			   }
 	  			});
 		        element.progress('demo',n+"%");
 		      }
  		  ,500);
  		}
	  });
  //封面缩略图路径获得方式	  
  upload.render({
	    elem: '#imgUpload'
	    ,url: 'UploadImgServlet'
	    ,accept: 'images' //图片
	    ,done: function(res){ // 上传文件后得到的 服务器响应状态

	    }
	  });
  
});
</script>



</body>
</html>